import React, { useState } from 'react'
import Header from "../../components/Header/Header"
import { Form, Input,Button,Toast } from 'antd-mobile'
import { reqregister } from '../../http/api'
import "./Register.less"

export default function Register(props) {
  const [user, setuser] = useState({
    phone:"",
    nickname:"",
    password:"",
  })

  const register=()=>{
    reqregister(user).then((res)=>{
      if(res.data.code === 200){
        /* 弹成功 */
        Toast.show({
          content:res.data.msg,
      })
      /* 跳转页面 */
     props.history.push("/login")
      }
    })
  }

  return (
    <div className='register'>
        <Header text="注册" back></Header>

        {/* {JSON.stringify(this.state.user)} */}
         <Form layout='horizontal'>
          <Form.Item label='手机号' name='phone'>
            <Input placeholder='请输入手机号' clearable
            onChange={e=>setuser({...user,phone:e})} />
          </Form.Item>
          <Form.Item label='昵称' name='nickname'>
            <Input placeholder='请输入昵称' clearable 
            onChange={e=>setuser({...user,nickname:e})}/>
          </Form.Item>
          <Form.Item label='密码' name='password'>
            <Input placeholder='请输入密码' clearable type='password'
            onChange={e=>setuser({...user,password:e})} />
          </Form.Item>
          <Button block color='primary' size='large'
          onClick={()=>register()}>
          注册
        </Button>
        </Form>
      </div>
  )
}
